import React, { useEffect, useState } from 'react';
import * as service from '../../../api/Statistics'
import './Style/StatSurvey.scss'
import { DatePicker, Space, Table, Button, Card, Col, Row } from 'antd';
import { DualAxes, Pie, Column, Bar } from "@ant-design/plots";
import { ItemRender } from 'antd/es/upload/interface';
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { RangePicker } = DatePicker;

function StatSurvey(props: Props) {
    const [datalist, setDatalist] = useState([])//数据概况
    const [loading, setLoading] = useState(false);
  
    const [educatelist, setEducatelist] = useState([])//学历
    const [genderlist, setGenderlist] = useState([])//性别
  

    const [datanl, setDatanl] = useState([]);
    const [datafw, setDatafw] = useState([]);
    const [databq, setDatabq] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 30 });

    useEffect(() => {
        setLoading(true);
        // 数据概况列表
        service.database_list().then((res) => {
            // console.log(res.data);
            setDatalist(res.data.data)
            setPagination({
                ...pagination,
                total: res.data.data.length
            })
            setLoading(false);
        })
        //年龄构成
        service.ages_list().then((res) => {
            // console.log(res);
            setDatanl(res.data.data);
            setLoading(false);
        })
         // 学历列表
         service.educate_list().then((res) => {
            // console.log(res);
            setEducatelist(res.data.data)
            setLoading(false);
         })
        // 性别统计
        service.gender_list().then((res) => {
            // console.log(res);
            setGenderlist(res.data.data)
            setLoading(false);
        })
        // 服务包
        service.datafw().then((res) => {
            // console.log(res);
            setDatafw(res.data.data)
            setLoading(false);
        })
        // 居民标签
        service.databq().then((res) => {
            // console.log(res);
            setDatabq(res.data.data)
            setLoading(false);
        })
    }, [])

    const handleChange = (pagi: any) => {
        setPagination(pagi);//更新页码
    }

    // 数据源  表头
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{datalist.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '居民数量',
            dataIndex: 'residentnum',
            key: 'residentnum',
        },
        {
            title: '签约量',
            dataIndex: 'contractnum',
            key: 'contractnum',
        },
        {
            title: '服务量',
            dataIndex: 'servicenum',
            key: 'servicenum',
        },
    ]
    // 数据概况
    const config = {
        data: [ datalist, datalist],
        xField: 'date',
        yField: ['contractnum', 'residentnum', 'servicenum'],
        geometryOptions: [
            {
                geometry: 'line',
                color: '#5B8FF9',
            },
            {
                geometry: 'line',
                color: '#5AD8A6',
            },
            {
                geometry: 'line',
                color: '#5AD8FF8',
            },
        ],
        meta: {
            contractnum: {
                alias: '签约量',
            },
            residentnum: {
                alias: '居民数量',
            },
            servicenum: {
                alias: '服务量',
            },
        },
    };
    //  年龄统计
    const confignl = {
        appendPadding: 10,
        data: datanl,
        angleField: 'population',
        colorField: 'years',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民年龄统计',
            },
        },
    };

    // 学历统计
    const configxl = {
        appendPadding: 10,
        data: educatelist,
        angleField: 'population',
        colorField: 'education',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民学历统计',
            },
        },
    };
    // 性别统计

    const configxb = {
        appendPadding: 10,
        data: genderlist,
        angleField: 'population',
        colorField: 'sex',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民性别统计',
            },
        },
    };

    // 标签统计
    const configbq = {
        data: databq,
        xField: 'value',
        yField: 'tag',
        barBackground: {
            style: {
                fill: 'rgba(0,0,0,0.1)',
            },
        },
        meta: {
            value: {
                alias: '总人数',
            },
        },
        interactions: [
            {
                type: 'active-region',
                enable: false,
            },
        ],
        minBarWidth: 10,
        maxBarWidth: 10,

    };

    // 服务包
    const configfw = {
        data:datafw,
        xField: 'year',
        yField: 'value',
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          value: {
            alias: '服务量',
          },
        },
        minColumnWidth: 20,
        maxColumnWidth: 20,
    };
    // 导出
      let excel = () => {//导出Excel表
        let sheetFilter = ["date", "residentnum", 'contractnum', 'servicenum', ]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "数据概况";
        option.datas = [
            {
                sheetData: datalist,//需要导出的数据
                sheetName: "数据概况",
                sheetFilter: sheetFilter,
                sheetHeader: ["日期", "居民数量", "签约量", "服务量", ],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
    }
    return (
        <div className='data-survey' style={{ padding: 20 }}>
            <div className='title'>数据概况</div>
            <div style={{ padding: "0 50px" }}>
                <Card title="数据概况" bordered={false} >
                    <DualAxes {...config} />
                    <Button  onClick={() => { excel() }}  style={{ float: 'right', margin: '10px 0' }}  >导出</Button>
                    <Table columns={columns} dataSource={datalist} loading={loading} rowKey={(row: any) => row.date}
                    pagination={pagination}
                    onChange={(pagi) => { handleChange(pagi) }}
                    />
                </Card>
            </div>
            <Row gutter={16} style={{ paddingTop: 20 }}>
                <Col span={8}>
                    <Card title="居民年龄构成" bordered={false}>
                        <Pie {...confignl} />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="居民学历构成" bordered={false}>
                        <Pie {...configxl} />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="居民性别构成" bordered={false}>
                        <Pie {...configxb} />
                    </Card>
                </Col>
            </Row>

            <Row gutter={16} style={{ paddingTop: 20 }}>
                <Col span={8}>
                    <Card title="居民标签" bordered={false}>
                        <Bar {...configbq} />
                    </Card>
                </Col>
                <Col span={16}>
                    <Card title="服务包使用情况" bordered={false}>
                        <Column {...configfw} />
                    </Card>
                </Col>
            </Row>
        </div>

    );
}



export default StatSurvey;